import React from 'react';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Typography from "@material-ui/core/Typography";

const font_size = 20;
const temp = makeStyles({
  body1Select: {
    backgroundColor: "lightgreen",
  },

  title: {
    flex: '1 1 100%',
    alignItems: "center",
    alignContent: "center"
  },

  body1NoSelect: {

  },

  body2Select: {
    backgroundColor: "lightyellow",
  },

  body2NoSelect: {

  },

  border2: {
    border: "none",
    fontSize: font_size,
  },
  border1: {
    fontSize: font_size,
  }
});

let facN = 10;

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
    fontSize: font_size,
  },
  body: {
    backgroundColor: (props) =>  props.backgroundColor,
    fontSize: font_size,
  },
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.action.hover,
    },
  },
}))(TableRow);


const generate = (n) => {
  let list = [1]
  for(let i = 1; i <= n; i++) {
    list.push(i * list[i - 1]);
  }
  list.splice(0, 1);
  return list;
}

const generateList = (n) => {
  let list = []
  for (let i = 1; i <= n; i++) {
    list.push(i);
  }
  return list;
}

const generateDict = (name, n) => {
  let dict = new Map();
  dict.set("name", name);
  let list = generate(n);
  for (let i = 1; i <= n; i ++) {
    dict.set(i, list[i-1].toString());
  }
  return dict;
}

const generateDictForQuestion = (name, listN, listRes) => {
  let list = [];
  list.push(name);
  listRes.map((x)=>list.push(x));
  return list;
}

// n 代表当前访问的节点
const generateSequenceDict = (n= -1, listN, props) => {
  let list = [];
  list.push("");
  for (let i = 0; i < n; i ++) {
    list.push("")
  }
  if (n !== -1) {
    let mulSymbol = props.type;
    list.push(mulSymbol + (props.nowRes === undefined ? listN[n + 1] : props.nowRes));

  }
  return list;

}



const generateTable = (row) => {

  row.splice(0, 1);

  return row;
}

const useStyles = makeStyles({
  table: {
    // minWidth: "100px",
    // // display: "flex",
    width: "auto",
    margin: "auto",
    boxShadow: "none"
  },
});

export default function CustomizedTables(props) {
  const classes = useStyles();

  const mod = temp();
  if (props.listN.length !== 0) {
    let rows = [];

    let listN = [...props.listN];
    rows.push(generateDictForQuestion(props.bodyName, listN, [...props.listRes]));
    rows.push(generateSequenceDict(props.nowIndexMul, listN, props));
    return (

    <TableContainer
        id = {props.tableId}
        component={Paper}
        className={classes.table}
    >
      <h5 className="justify-content-center align-items-center text-center">
        {(props.tableName === undefined ? "": props.tableName)}
        </h5>
      <Table className={classes.table} aria-label="customized table" >
        <TableHead>
          <TableRow>

            <StyledTableCell align="center">{props.headName}</StyledTableCell>
            {listN.map(x=>(<StyledTableCell  align="center">{x}</StyledTableCell>))}

          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row, index) => (

              <StyledTableRow key={row[0]}>
                  <StyledTableCell className={`${ index === 0 ? mod.border1: mod.border2}`} component="th" scope="row" align="center">
                    {row[0]}
                  </StyledTableCell>

                 {generateTable(row).map((x, i)=>(<TableCell id={props.tableId + index.toString() + i.toString()}
                     className={`${ index === 0 ? mod.border1: mod.border2} ${index === 0 && i === props.nowIndexRes ? mod.body1Select : mod.body1NoSelect} ${index === 1 && i === props.nowIndexMul ? mod.body2Select: mod.body2NoSelect}
                      `

                 }  align={"center" }>{x}</TableCell>))}
            </StyledTableRow>)
          )}
        </TableBody>
      </Table>
    </TableContainer>

  );
  }

}
